<template>
  <div id="app">
	  
   <!-- 背景图-->
   <img class="bg" src="../assets/img/bg.jpg" />
   
	  <!-- Main 主体内容-->
    <section id="main">
    	<div class="inner">
	    <section id="one" class="wrapper style1">
			
			<!-- header 头像及id显示 -->
	    	<header class="special">
	    		<h2>个人信息</h2>
				<div class="user_header">
				  <img class="user_img"src="../assets/img/login.png" /> 
				  <div class="user_id">{{userinfo.userid}}</div> 
				</div>
				
				<!--修改信息或者保存修改-->
				<button>
					<span @click="changeinfo(0)" v-if="this.changeStatus">修改信息</span>
					<span @click="changeinfo(1)" v-else>保存修改</span>
				</button>
	    	</header>
			
			<!--个人信息 -->
	    	<div class="content">	
			   <div class="normal_1">用户名	<input v-model="userinfo.username"  :disabled="changeStatus" /> </div>
			   <div class="normal_2">年龄	<input v-model="userinfo.age"  :disabled="changeStatus" /> </div>
			   <div class="normal_1">性别	<input v-model="userinfo.gender"  :disabled="changeStatus" /> </div>
			   <div class="normal_2">邮箱	<input v-model="userinfo.email"  :disabled="changeStatus" /> </div>
			   <div>个人简介 <textarea  v-model="userinfo.introduction"  :disabled="changeStatus" rows="10"></textarea> </div>
			</div>
	    </section>
	  	</div>
	</section>	  
  </div>
</template>

<script>

export default {
  name: 'app',
  components: {
   
  },
  data(){
	  return{
		  changeStatus:true,    // 根据变量，改变输入框状态和按钮显示内容
		   //从store获取用户信息
		  userinfo:{
			  userid:this.$store.state.UserInfo.userid,
			  username:this.$store.state.UserInfo.username,
			  age:this.$store.state.UserInfo.age,
			  gender:this.$store.state.UserInfo.gender,
			  introduction:this.$store.state.UserInfo.introduction,
			  email:this.$store.state.UserInfo.email
		  }
	  }
  },
  methods:{
	  
//点击保存修改时，用户信息进行修改
//信息前后一致时不进行处理
changeinfo:function(edata){
	
	var server = this.$myConfig.server
	
	this.changeStatus = !this.changeStatus
	if(edata){
		if(this.userinfo.age == this.$store.state.UserInfo.age &&
           this.userinfo.gender == this.$store.state.UserInfo.gender &&
	       this.userinfo.username == this.$store.state.UserInfo.username &&
	       this.userinfo.introduction== this.$store.state.UserInfo.introduction &&
	       this.userinfo.email == this.$store.state.UserInfo.email
	       ){
		   return;
	         }
	else{
		let data={
			   userid:this.userinfo.userid,
			   age:this.userinfo.age,
			   gender:this.userinfo.gender,
			   username:this.userinfo.username,
			   introduction:this.userinfo.introduction,
			   email:this.userinfo.email
		          }
	this.$axios({
		method: 'post',
		url: server + "/user/update",
		withCredentials:true,
		data:data,
		}).then((res)=>{   
			if(res.data.status == -1){
				this.timer = setTimeout(()=>{  //设置延迟执行
				  this.$router.push("/login");
				},1000);
			}
				 else if(res.data.status == 1){
					  this.$store.state.UserInfo.age = this.userinfo.age;
					  this.$store.state.UserInfo.gender = this.userinfo.gender;
					  this.$store.state.UserInfo.username = this.userinfo.username;
					  this.$store.state.UserInfo.introduction = this.userinfo.introduction;
					  this.$store.state.UserInfo.email = this.userinfo.email;
					  this.$message({
					            message: '修改成功',
					            type: 'success'
					          });
				      }else{	  
					  this.$message.error('修改失败！');
				            }
		    })
	    }
	 }
  },
}
}

</script>

<style scoped>

/* Header */
html,body,#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  padding: 0;
}

#app{
	margin-top: 8rem;
}	
	
.bg {
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    transition: all .25s;
    width: 100%;
    z-index: -1;
}
		
.user_header{
	margin-top: 30px;
}
	
.user_img{
	width: 60px;
	display: inline-block;
	vertical-align:middle
}

.user_id{
	display: inline-block;
	vertical-align:middle;
	margin-left: 10px;
}


button{
	margin-top: 50px;
	background-color: rgb(102,102,102);
	border-radius: 5px;
	border-style: none;
	color: #fff;
	cursor: pointer;
	font-size: 16px;
	padding: 10px 15px;
	transition: all .25s;
	width: 10%;
}
button:hover {
    filter: brightness(1.1);
}

/* Main */
#main > .inner {
	margin: 0 auto;
	width: 80rem;
	max-width: 90%;
	margin-bottom: 2rem;
	background: rgba(255, 255, 255, 0.95);
	-webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.75);
	-moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.75);
	box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.75);
	border-radius: 10px;
}

@media screen and (max-width: 980px) {
#main .image {
	width: 100%;
	min-width: 100%;
	float: none;
	margin: 0 0 2rem 0;
}
#main .image img {
	width: 100%;
}
}

.wrapper > header {
	text-align: center;
	background: #FFF;
	padding: 2rem;
	margin: 0;
}

.wrapper > header h2 {
	position: relative;
	padding-bottom: .75rem;
}

.wrapper > header h2:after {
	content: '';
	position: absolute;
	margin: auto;
	right: 0;
	bottom: 0;
	left: 0;
	width: 10%;
	height: 1px;
	background-color: rgba(0, 0, 0, 0.125);
}

.wrapper > header p {
	text-transform: uppercase;
	font-weight: 300;
	font-size: .8rem;
	letter-spacing: .25rem;
	margin: 0;
}

.wrapper > header.special {
	padding: 4rem 2rem 3rem 2rem;
}

@media screen and (max-width: 980px) {
.wrapper > header.special {
	padding: 3rem 2rem;
}
}

@media screen and (max-width: 736px) {
.wrapper > header {
	padding: 1.5rem;
}
.wrapper > header h2 {
    font-size: 1.5rem;
}
.wrapper > header h2:after {
	width: 50%;
}
}

.wrapper.style1 .content {
	padding: 6rem;
}

@media screen and (max-width: 1280px) {
.wrapper.style1 .content {
	padding: 4rem;
}
}

@media screen and (max-width: 736px) {
.wrapper.style1 .content {
	padding: 2rem;
}
}

.wrapper.style2 {
    background: #1e1f23;
	padding: 6rem;
}

.wrapper.style2 header {
	background: #121315;
	border-radius: 4px 4px 0 0;
}

.wrapper.style2 header h2 {
	color: #FFF;
}

.wrapper.style2 header h2:after {
	background-color: rgba(255, 255, 255, 0.125);
}

.wrapper.style2 header p {
	color: rgba(255, 255, 255, 0.25);
}

@media screen and (max-width: 1280px) {
.wrapper.style2 {
	padding: 4rem;
}
}

@media screen and (max-width: 736px) {
.wrapper.style2 {
	padding: 2rem;
}
}

input,textarea{
	background-color: #fff;
	border: 1px solid rgba(0,0,0,.1);
	border-radius: 5px;
	display: block;
	font-size: 14px;
	margin: 15px 0;
	padding: 10px 15px;
	transition: border-color .2s;
	width: 100%;
}

.normal_1,.normal_2{
	display: inline-block;
	width: 45%;
}

.normal_1{
	margin-right: 10%;
}

</style>
